<template>
  <view class="mm-wrap">
    <!-- #ifdef H5 -->
    <view
      v-if="!loading"
      class="mm-document"
      :style="{
        paddingTop: globStatusBarHeight + globNavbarHeight + 'px',
      }"
    >
      <view
        class="mm-document__title"
        :style="{
          height: globNavbarHeight + 'px',
          top: globStatusBarHeight + 'px',
        }"
        >{{ getCurrentPlayItem.title || '' }}</view
      >
      <view class="mm-document-content" :style="[contentStyle]">
        <web-view :src="imageTextContent"></web-view>
      </view>
      <view class="mm-document__open" @click="onDialogOpen">
        <u-image width="102rpx" height="102rpx" src="@/pageCourse/static/images/shu.png"></u-image>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view class="mm-web-view">
      <edu-image width="100%" :height="415" :src="url"></edu-image>
    </view>
    <!-- #endif -->

    <!-- 文档弹出 -->
    <!-- #ifdef H5 -->
    <view class="mm-dialog" v-show="dialogVisible">
      <view :style="{ height: globStatusBarHeight + 'px' }"></view>
      <view class="mm-dialog-title">
        {{ getCurrentPlayItem.title || '' }}
      </view>
      <view class="mm-dialog-content">
        <web-view
          :style="[contentDialogStyle]"
          :src="imageTextContent"
          :fullscreen="false"
        ></web-view>
      </view>
      <view class="mm-dialog-close" @click="onDialogClose">
        <u-image width="102rpx" height="102rpx" src="@/pageCourse/static/images/shu.png"></u-image>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
var wv //计划创建的webview
export default {
  props: ['url'],
  data() {
    return {
      imageTextContent: '', // 图文内容
      dialogVisible: false, // 文档弹出
      timer: null,
      seconds: 0,
      loading: true,
    }
  },
  computed: {
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    contentStyle() {
      return {
        width: this.$u.sys().windowWidth + 'px',
        top: this.globNavbarHeight + 'px',
        height: uni.upx2px(415) - this.globNavbarHeight + 'px',
      }
    },
    contentDialogStyle() {
      let width = this.$u.sys().windowWidth
      let height = this.$u.sys().windowHeight
      return {
        width: width + 'px',
        height: height - this.globNavbarHeight + 'px',
      }
    },
    // #ifdef APP-PLUS
    webViewStyle() {
      return {
        position: 'static',
        width: this.$u.sys().windowWidth + 'px',
        top: this.globNavbarHeight + this.globStatusBarHeight + 'px',
        height: uni.upx2px(415) - this.globNavbarHeight + 'px',
      }
    },
    webViewDialogStyle() {
      let width = this.$u.sys().windowWidth
      let height = this.$u.sys().windowHeight
      return {
        width: width + 'px',
        height: height - this.globNavbarHeight + 'px',
      }
    },
    // #endif
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
  },
  methods: {
    // 打开弹出
    onDialogOpen() {
      this.dialogVisible = true
      this.$emit('change')
    },
    // 关闭弹出
    onDialogClose() {
      this.dialogVisible = false
      this.$emit('change')
    },
    // 获取播放地址
    getPlayerFile(data) {
      this.loading = true
      let fileurl = data.fileurl_string
      let query = {
        file: `eduline_${fileurl}_eduline`,
      }
      this.imageTextContent = `/hybrid/html/pdf-view/index.html${this.$u.queryParams(query)}`

      setTimeout(() => {
        this.loading = false
      }, 200)
      this.timing()
    },
    // 定时添加学习记录
    timing() {
      clearInterval(this.timer)
      this.seconds = 0
      this.timer = setInterval(() => {
        this.seconds += 10
        this.handleAddLearning()
      }, 10000)
    },
    // 添加学习记录
    handleAddLearning() {
      this.$edu.api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: this.seconds,
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style lang="scss" scoped>
.mm-wrap {
  height: 415rpx;
  position: relative;
}

.mm-document {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  .mm-document__title {
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    display: flex;
    align-items: center;
    position: absolute;
    left: 30rpx;
  }
  .mm-document-content {
    position: absolute;
    left: 0;
  }
  .mm-document__open {
    position: absolute;
    right: 18rpx;
    bottom: 12rpx;
    z-index: 10;
  }
}

.mm-web-view {
  height: 100%;
  background-color: #ffffff;
}

.mm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10075;
  background: #ffffff;
  .mm-dialog-title {
    padding: 0 30rpx;
    height: 44px;
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    line-height: 44px;
  }
  .mm-dialog-close {
    position: fixed;
    bottom: 60rpx;
    right: 18rpx;
  }
}
</style>
